<template>
  <div class="message">
    <header class="message_header">
      <BaseNavBar is-nav="true" :title="friend?.nickname" />
    </header>
    <main class="message_main">
      <section class="message_main_message" v-for="item in messageList" :key="item?.id"  :style="{alignSelf: item?.userId == user?.id ? 'end' : 'start'}">
        <section style="display: flex; justify-content: space-between;">
          <img :src="item?.userId == user?.id ? self?.avatar : friend?.avatar " class="message_main_message_avatar" :style="{order: item?.userId == user?.id ? 2 : 1}">
          <p class="message_main_message_content" :style="{order: item?.userId == user?.id ? 1 : 2}">{{ item?.content }}</p>
        </section>
        <p class="message_main_message_time" :style="{justifyContent: item?.userId == user?.id ? 'start' : 'end'}">
          <span>{{ item?.createTime }}</span>
        </p>
      </section>
    </main>
    <footer class="message_footer">
        <van-cell-group>
          <van-field v-model="content" center type="textarea" clearable placeholder="请输入消息">
            <template #button>
              <van-button size="small" type="primary" @click="handleSend">发送消息</van-button>
            </template>
          </van-field>
        </van-cell-group>
      </footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute } from "vue-router";
import { showToast } from 'vant';
import BaseNavBar from '@/components/BaseNavBar/index.vue';
import { getMessageList, addMessage} from '@/apis/message';
import { getUserInfo } from '@/apis/user';

const route = useRoute();

const user = ref({});

const self = ref({});
const friend = ref({});

const messageList = ref([]);

const content = ref('');

const init = async () => {
  try {
    console.log(route, 'route');

    const res = await getMessageList({
      friendId: +route.params?.userId,
      pageNum: 1,
      pageSize: 9999
    });
    if (res?.code === 200) {
      console.log(res, 'res');
      messageList.value = res?.data?.list;
      self.value = res?.data?.userInfo;
      friend.value = res?.data?.friendInfo;
    }


  } catch (error) {
    console.log(error, 'init-error');

  }
};

const getUerInfo = async () => {
  try {
    const res = await getUserInfo();
    if (res?.code === 200) {
      user.value = res?.data;
    }
  } catch (error) {
    console.log(error, 'getUerInfo-error');

  }
}

const handleSend = async () => {
    try {
      const res = await addMessage({
        content:content.value,
        friendId:+route.params?.userId,
      });
      if(res?.code === 200) {
        content.value = '';
        init();
        return;
      }
      showToast(res?.msg);
    } catch (error) {
      console.log(error, 'handleSend-error');

    }
}

onMounted(() => {
  init();
  getUerInfo();
});
</script>

<style lang="less" scoped>
.message {
  display: flex;
  flex-direction: column;
  &_main{
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    &_message{
      max-width: 300px;
      margin-top: 8px;
      box-sizing: border-box;
      padding: 8px;
      background-color: #fff;
      border-radius: 4px;
      // align-self:end;
      &_avatar{
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
      &_content{
        max-width: 240px;
        font-size:14px;
        color: #666;
        word-wrap: break-word;

      }
      &_time{
        margin-top: 4px;
        font-size: 12px;
        color: #999;
        display: flex;
        // justify-content: start;
      }
    }
  }
  &_footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
}
</style>
